<!-- 项目列表页面 -->
<template>
	<section class="project-list prols">
		<!-- 甘特图 -->
		<div class="prols-gantt-title"></div>
		<div class="prols-gantt">
			<XdcGantt :tasks="ganttTasks" :columns="ganttColumns" :grid-title="ganttGridTitle" />
		</div>
		<!-- 工具栏 -->
		<section class="prols-toolbar">
			<XdcFilters class="prols-toolbar-filters" :data="filtersData" @filter="onFilter" />
			<div class="prols-toolbar-btns">
				<el-tooltip content="刷新">
					<el-icon><RefreshRight /></el-icon>
				</el-tooltip>
				<el-tooltip content="设置">
					<el-icon><Setting /></el-icon>
				</el-tooltip>
			</div>
		</section>
		<!-- 表格 -->
		<el-table
			ref="table"
			:data="tableData.list"
			highlight-current-row
			@current-change="handleCurrentChange"
		>
			<el-table-column type="index" width="50" />
			<el-table-column label="项目名称" prop="name" />
			<el-table-column label="所有者" prop="leaderName" />
			<el-table-column label="状态">
				<template #default="scope">
					<el-tag :type="getStatusTheme(scope.row)" effect="dark">
						{{ scope.row.statusText }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="任务">
				<template #default="scope">
					<el-progress text-inside :stroke-width="16" :percentage="scope.row.progress * 100" />
				</template>
			</el-table-column>
			<el-table-column label="里程碑" />
			<el-table-column label="问题" />
			<el-table-column label="开始日期" prop="start_date" sortable />
			<el-table-column label="结束日期" prop="end_date" sortable />
		</el-table>
		<el-pagination
			class="xdc-pagination"
			v-model:page-size="tableData.pageSize"
			v-model:curreng-page="tableData.pageNum"
			:total="tableData.total"
			:layout="tableData.layout"
		/>
	</section>
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
import XdcGantt from '@/components/XdcGantt/XdcGantt.vue';
import XdcFilters, { XdcFilterData, XdcFilterOption } from '@/components/XdcFilters/XdcFilters.vue';
import opts from '@/utils/opts';
import { projects, projectLeaders } from '@/mock/project.mock';

const table = ref();
const tableData = reactive({
	filters: {},
	list: null,
	pageNum: 1,
	total: 100,
	pageSize: 10,
	pageSizes: [10, 20, 50, 100],
	layout: 'prev, pager, next,jumper,sizes,total',
	currentRow: null,
});
onMounted(async () => {
	await queryList(1);
});
const filtersData = reactive<XdcFilterData<string>>({
	id: {
		placeholder: '项目',
		options: [],
		value: null,
		textField: 'name',
		valueField: 'id',
		loading: false,
		query: (str: string) => {
			filtersData.id.loading = true;
			str = str?.trim();
			const textField = filtersData.id.textField;
			setTimeout(() => {
				filtersData.id.loading = false;
				if (str.length) {
					filtersData.id.options = (projects as unknown as XdcFilterOption<string>[]).filter(
						item => item[textField].indexOf(str) >= 0
					);
				} else {
					filtersData.id.options = projects as unknown as XdcFilterOption<string>[];
				}
			}, 300);
		},
	},
	leader: {
		placeholder: '项目负责人',
		options: [],
		value: null,
		textField: 'name',
		valueField: 'id',
		loading: false,
		query: (str: string) => {
			filtersData.leader.loading = true;
			str = str?.trim();
			const textField = filtersData.leader.textField;
			setTimeout(() => {
				filtersData.leader.loading = false;
				if (str.length) {
					filtersData.leader.options = (
						projectLeaders as unknown as XdcFilterOption<string>[]
					).filter(item => item[textField].indexOf(str) >= 0);
				} else {
					filtersData.leader.options = projectLeaders as unknown as XdcFilterOption<string>[];
				}
			}, 300);
		},
	},
	status: {
		placeholder: '项目状态',
		options: [],
		value: null,
		textField: 'text',
		valueField: 'value',
		loading: false,
		query: (str: string) => {
			filtersData.status.loading = true;
			str = str?.trim();
			const textField = filtersData.status.textField;
			setTimeout(() => {
				filtersData.status.loading = false;
				if (str.length) {
					filtersData.status.options = (
						opts.projectStatus as unknown as XdcFilterOption<string>[]
					).filter(item => item[textField].indexOf(str) >= 0);
				} else {
					filtersData.status.options = opts.projectStatus as unknown as XdcFilterOption<string>[];
				}
			}, 300);
		},
	},
});
const onFilter = filters => {
	tableData.filters = filters;
	queryList(1);
};
const queryList: (pageNum?: number) => void = async pageNum => {
	if (pageNum != null) {
		tableData.pageNum = pageNum;
	}
	Promise.resolve().then(() => {
		tableData.list = projects.filter(item => {
			for (let key in tableData.filters) {
				const filter = tableData.filters[key];
				if (item[filter.fieldName] !== filter.fieldValue) {
					return false;
				}
			}
			return true;
		});
		table.value.setCurrentRow(tableData.list?.[0]);
	});
};
const sizeChange = pageSize => {
	queryList(1);
};
const curentChange = pageNum => {
	queryList();
};
const handleCurrentChange = (currentRow, oldRow) => {
	tableData.currentRow = currentRow;
};
const getStatusTheme = row => {
	const themes = ['', 'success', 'warning', 'info'];
	return themes[row.status];
};
/**
 * 甘特图任务列表
 */
const ganttProject = computed(() => {
	return tableData.currentRow || tableData.list?.[0];
});
const ganttTasks = computed(() => {
	return ganttProject.value?.tasks || [];
});
const ganttColumns = [
	{ name: 'name', label: '任务名', tree: true, width: 160, resize: true },
	{ name: 'leader', label: '责任人', align: 'center', width: 80, resize: true },
	{ name: 'mrpId', label: 'MRP ID', align: 'center', width: 80, resize: true },
	{ name: 'duration', label: '工时', align: 'center', width: 60, resize: true },
];
const ganttGridTitle = computed(() => {
	return ganttProject.value?.name;
});
</script>
<style lang="scss">
.prols {
	padding: 15px;
	&-gantt {
		height: 300px;
	}
	&-toolbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&-toolbar-filters {
		flex-grow: 1;
		flex-shrink: 0;
	}
	&-toolbar-btns {
		flex-grow: 0;
		.el-icon {
			margin-left: 20px;
			cursor: pointer;
		}
	}
}
</style>
